.style-variation__badge-more-wrapper,
.style-variation__badge-wrapper {
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 20px;

	> * {
		align-items: center;
		background: #fff;
		border: none;
		border-radius: 50%;
		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
		color: var(--studio-gray-80);
		cursor: pointer;
		display: inline-flex;
		font-size: 11px;
		font-weight: 500;
		height: 100%;
		justify-content: center;
		position: relative;
		transition: background-color 0.15s ease-in-out;
		width: 100%;

		&:hover {
			&::after {
				background: rgb(255 255 255 / 42%);
				bottom: 0;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
				border-radius: 50%;
			}
		}
	}
}

.style-variation__badge-more-wrapper {
	> * {
		box-shadow: none;
	}
}

.style-variation__badge-is-selected {
	> * {
		cursor: default;
		box-shadow:
			inset 0 0 0 1px rgb(0 0 0 / 20%),
			0 0 0 2px var(--studio-blue-30);

		&:hover {
			&::after {
				display: none;
			}
		}
	}
}
